<template>
	<div>
		<!-- 处理中查看 处理完成查看  同一弹框 -->
		<el-drawer
			v-model="state.centerDialogVisible"
			size="60%"
			:with-header="true"
			@open="openDialog"
			class="dialogStyle"
		>
			<template #header>
				<div class="look_info">查看详情</div>
			</template>
			<!-- 已处理图标 -->
			<div class="ycl" v-if="state.dealStatus > 1">
				<svg-icon icon-class="ycl-icon" />
			</div>
			<p class="oneline info_title">基本信息</p>

			<el-form
				:model="formInline"
				:inline="true"
				ref="formInlineRef"
				:rules="rulesData"
				class="demo-form-inline"
				label-width="150px"
			>
				<el-row>
					<el-col :span="12">
						<el-form-item label="项目名称">
							<el-input v-model="formInline.projectName" disabled />
						</el-form-item>
						<el-form-item label="创建人">
							<el-input v-model="formInline.createUserName" disabled />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="状态">
							<el-select v-model="formInline.dealStatus" disabled>
								<el-option label="待处理" :value="-1"> </el-option>
								<el-option label="处理中" :value="1"> </el-option>
								<el-option label="已处理" :value="2"> </el-option>
								<el-option label="已关闭" :value="3"> </el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="检查内容">
							<el-input v-model="formInline.checkContent" disabled />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="检查单位">
							<el-input v-model="formInline.checkCompanyName" disabled />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="处理人" prop="dealUserName">
							<el-select
								v-model="formInline.dealUserName"
								disabled
								placeholder="请选择处理人"
							>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="截止时间" prop="deadline">
							<el-date-picker
								v-model="formInline.deadline"
								type="date"
								value-format="YYYY-MM-DD"
								disabled
							/>
						</el-form-item>
					</el-col>
					<p class="oneline info_title">整改通知</p>
					<el-col :span="12">
						<el-form-item label="问题分类">
							<el-cascader
								v-model="formInline.problemCategory"
								:options="state.optionsArr"
								:props="state.props"
								disabled
								@change="changeProblemCategory"
							/>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="问题类型">
							<el-cascader
								v-model="formInline.problemType"
								:options="state.options"
								:props="state.props"
								disabled
							/>
						</el-form-item>
					</el-col>
					<el-form-item label="问题描述">
						<el-input
							v-model="formInline.problemDescription"
							:disabled="state.dealStatus == 3 || state.type == '查看'"
						/>
					</el-form-item>

					<el-form-item
						v-if="state.dealStatus > 0"
						label="建议解决方案"
						class="oneline"
					>
						<el-input
							v-model="formInline.solutionRemark"
							:disabled="state.dealStatus == 3 || state.type == '查看'"
						/>
					</el-form-item>
					<el-form-item label=""> </el-form-item>
					<el-form-item
						v-if="state.dealStatus > 0"
						label="处理说明"
						class="oneline"
						prop="dealExplain"
					>
						<el-input
							v-model="formInline.dealExplain"
							:disabled="state.dealStatus == 3 || state.type == '查看'"
							show-word-limit
							type="textarea"
						/>
					</el-form-item>
					<el-form-item
						v-if="state.dealStatus > 0"
						label="附件"
						class="oneline"
					>
						<!-- files   -->
						<FileMinioUpload
							:restriction="true"
							:restrictionLimit="9"
							@updateFiles="updateFiles"
							v-model:files="formInline.files"
							:disabled="state.dealStatus == 3 || state.type == '查看'"
							:businessType="20"
							:associationId="formInline.qualityProblemId"
              :show-button="!(state.dealStatus == 3 || state.type == '查看')"
						/>
					</el-form-item>
					<el-form-item
						v-if="state.dealStatus > 0"
						label="抄送相关人员"
						class="oneline"
					>
						<!-- copyUserIds -->
						<!-- @change="changeProject" -->
						<el-select
							v-model="formInline.copyUserIds"
							clearable
							class="select_project"
							multiple
							placeholder="请选择相关人员"
							:disabled="state.dealStatus == 3 || state.type == '查看'"
						>
							<el-option
								v-for="item in state.projectOptionsArr"
								:key="item.userId"
								:label="item.userName"
								:value="item.userId"
							/>
						</el-select>
					</el-form-item>
					<el-form-item
						label="验收状态"
						v-if="state.dealStatus == 3"
						class="oneline"
					>
						<!-- copyUserIds -->
						<el-radio-group v-model="formInline.checkStatus" disabled>
							<el-radio :label="-1">未验收</el-radio>
							<el-radio :label="1">已验收</el-radio>
						</el-radio-group>
					</el-form-item>
				</el-row>
			</el-form>
			<p class="oneline info_title">历史记录</p>
			<el-timeline
				v-if="state.getHistoryList && state.getHistoryList.length > 0"
			>
				<!-- :timestamp="item.operateTime" -->

				<el-timeline-item
					v-for="item in state.getHistoryList"
					:key="item.operateTime"
					placement="top"
					:center="true"
				>
					<el-card shadow="never" style="background: #FAFAFA;border-color: #FAFAFA;">
						<div class="d-flex j-sb">
							<div class="userInfo-font">
								<span>{{ item.departmentName || "部门" }}</span><span class="m-l10">{{ item.userName || "姓名" }}</span>
							</div>
							<div><span class="span_sty_3 m-l50">{{ item.operateTime }}</span></div>
						</div>
						<div class="m-t5">
							<span class="span_sty_2">{{ filterStatus(item.type) }}名为</span>
							<span class="span_sty">
								{{ item.qualityProblemName }}
							</span>
							<span class="span_sty_2">的质量监督</span>
							<!-- <span>{{ item.result }}</span> -->
						</div>
					</el-card>
				</el-timeline-item>
			</el-timeline>
			<div class="btn_box">
				<!-- <el-button @click="closeHandler" class="look">关闭</el-button> -->
				<el-button
					v-if="state.dealStatus == -1"
					@click="inProcessHandler(formInlineRef)"
					class="button_view"
					>接受处理</el-button
				>

				<el-button
					v-if="state.dealStatus == 1"
					@click="checkHandler(formInlineRef)"
					class="button_view"
					>处理完成</el-button
				>
				<el-button
					v-if="state.dealStatus == 2"
          class="button_cancel"
					@click="acceptanceCheck(-1)"
					>验收驳回</el-button
				>
				<el-button
					v-if="state.dealStatus == 2"
					@click="acceptanceCheck(1)"
					class="button_view"
					>验收</el-button
				>
			</div>
		</el-drawer>
	</div>
</template>
<script setup>
import fileupload from "@/components/FileUpload.vue";
import FileMinioUpload from "@/components/FileMinioUpload.vue";
import { qualitySupervision, userApi } from "@/api/project";
import { ref, reactive, computed, onMounted } from "vue";
import {
	ElRow,
	ElCol,
	ElDialog,
	ElCascader,
	ElTimelineItem,
	ElTimeline,
	ElCard,
	ElButton,
	ElForm,
	ElDrawer,
	ElFormItem,
	ElSelect,
	ElMessage,
} from "element-plus";
// <!-- 1处理中2已处理 -->
const state = reactive({
	type: "",
	centerDialogVisible: false,
	title: computed(() => {
		switch (state.dealStatus) {
			case 1: //处理中
				break;
			case 2: //已处理
				break;

			default:
				break;
		}
	}),
	dealStatus: 1,
	qualityProblemId: "",
	getHistoryList: [],
	options: [],
	props: {
		label: "problemName",
		value: "problemId",
	},
	projectOptionsArr: [], //人员列表
});
//过滤器
function filterStatus(status) {
	// 1创建2查询3删除4修改5处理6验收成功7验收失败
	switch (status) {
		case 1:
			return "创建";
			break;
		case 2:
			return "查询";
		case 3:
			return "删除";
		case 4:
			return "修改";
		case 5:
			return "处理";
		case 6:
			return "验收成功";
		case 7:
			return "验收失败";
			break;
		default:
			break;
	}
}
const rulesData = reactive({
	dealExplain: [{ required: true, message: "项目不能为空", trigger: "blur" }],
});
const formInlineRef = ref(null);
const formInline = reactive({
	projectName: "",
	createUserName: "",
	dealStatus: "",
	checkContent: "",
	checkCompanyName: "",
	dealUserName: "",
	deadline: "",
	// problemFiles: [],
	problemCategory: "",
	problemDescription: "",
	problemType: "",
	solutionRemark: "",
	dealExplain: "",
	files: [],
	copyUserIds: [],
	checkStatus: 1,
});
//附件2上传成功
const updateFiles = (list) => {
	console.log(list);
};
//附件1上传成功
const updateproblemFiles = (list) => {
	console.log(list);
};
//关闭
const closeHandler = () => {
	state.centerDialogVisible = false;
};
//处理成功
const checkHandler = async (formEl) => {
	if (!formEl) return;
	await formEl.validate((valid, fields) => {
		if (valid) {
			let submitObj = {
				qualityProblemId: state.qualityProblemId,
				dealExplain: formInline.dealExplain,
				copyUserIds: formInline.copyUserIds || [],
				files: formInline.files || [],
			};
			//处理提交
			qualitySupervision.dealProblem(submitObj).then((res) => {
				const { data, code, msg } = res;
				if (code == "200") {
					state.centerDialogVisible = false;
					emits("getsearch");
				}
			});
		}
	});
};
//验收
const acceptanceCheck = (checkStatus) => {
	let submitObj = {
		qualityProblemId: state.qualityProblemId,
		checkStatus,
	};
	//验收
	qualitySupervision.checkProblem(submitObj).then((res) => {
		const { data, code, msg } = res;
		if (code == "200") {
			ElMessage.success("验收成功");
			state.centerDialogVisible = false;
			emits("getsearch");
		}
	});
};
//选择变化
const changeProblemCategory = (val) => {
	getTypeList(val);
};
//保存
const inProcessHandler = async (formEl) => {
	if (!formEl) return;
	await formEl.validate((valid, fields) => {
		if (valid) {
			let submitObj = {
				qualityProblemId: state.qualityProblemId,
				dealExplain: formInline.dealExplain,
				copyUserIds: formInline.copyUserIds || [],
				...formInline,
			};
			//处理提交
			qualitySupervision.dealsave(submitObj).then((res) => {
				const { data, code, msg } = res;
				if (code == "200") {
					state.centerDialogVisible = false;
					emits("getsearch");
				}
			});
		}
	});
};
//打开回调
const openDialog = async () => {
	//获取历史记录
	getHistory();
	await qualitySupervision
		.getAndDealDetail(state.qualityProblemId)
		.then((res) => {
			const { code, data, msg } = res;
			if (code == 200) {
				Object.assign(formInline, data);
				formInline.problemCategory = "" + formInline.problemCategory;
				formInline.problemType = "" + formInline.problemType;
				if (formInline.problemCategory) {
					getTypeList(formInline.problemCategory);
				}
				formInline.checkStatus = formInline.checkStatus || -1;
			}
		});
};
const getTypeList = (id = "") => {
	qualitySupervision.type(id).then((res) => {
		const { code, data, msg } = res;
		if (code == 200) {
			if (id) {
				state.options = data;
			} else {
				state.optionsArr = data;
			}
		}
	});
};
const getHistory = () => {
	qualitySupervision.history(state.qualityProblemId).then((res) => {
		const { code, data, msg } = res;
		if (code == 200) {
			state.getHistoryList = data;
		}
	});
};
const getAlluser = () => {
	userApi.getAlluserList("").then((res) => {
		if (res.code == "200") {
			state.projectOptionsArr = res.data;
		}
	});
};
const emits = defineEmits(["getsearch"]);

defineExpose({
	state,
});
onMounted(() => {
	getAlluser();
	//获取列表
	getTypeList();
});
</script>

<style lang="scss" scoped>
@import "@/assets/general_style/dialog.scss";

.userInfo-font{
	font-size: 16px;
	font-family: SourceHanSansCN-Medium, SourceHanSansCN;
	font-weight: 600;
	color: #1A1A1A;
	line-height: 24px;
}

.span_sty_2{
	font-size: 14px;
	font-family: SourceHanSansCN-Normal, SourceHanSansCN;
	font-weight: 400;
	color: #969696;
	line-height: 21px;
}

.span_sty_3{
	font-size: 12px;
	font-family: SourceHanSansCN-Normal, SourceHanSansCN;
	font-weight: 400;
	color: #999999;
	line-height: 18px;
}


.el-drawer__header {
	background-color: red !important;

	box-sizing: border-box !important;
	height: 50px !important;
}

.look_info {
	font-size: 16px;
}
.oneline {
	width: 100%;
}
.info_title {
	font-size: 12px;
	color: #ccc;
}


.span_sty {
	font-size: 14px;
	font-family: SourceHanSansCN-Normal, SourceHanSansCN;
	font-weight: 600;
	color: #1A1A1A;
	line-height: 21px;
}
.btn_box {
	text-align: center;
	margin-top: 20px;
}
.ycl {
	margin-bottom: 20px;
	width: 100%;
	text-align: right;
	height: 110px;
	svg {
		width: 110px;
		height: 110px;
	}
}
.el-select,
.el-input,
.el-form-item,
.el-cascader {
	width: 100% !important;
}
.m-l50 {
	margin-left: 200px;
}
</style>
<style lang="scss" scoped>
.el-cascader {
	width: 100% !important;
}
body {
	font-family: SourceHanSansCN;
}
</style>
<style lang="scss" scoped>
@import "@/views/constructionProjectManage/static/button.scss";
@import "@/views/constructionProjectManage/static/dialog.scss";
</style>
